<script setup lang="ts" name="Scores">
import { ref } from 'vue';
import { getYear } from '@/hooks/useDate';
import { ExeAssessScoresDTO, ExeAssessScoresMainVO, ExeAssessScoresVO } from '@/api/fill/execute/scores/Types';
import { ScoreQueryDTO } from '@/api/fill/execute/budget-total/Types';
import { getDetail, getList, saveOrUpdate, updateStatus } from '@/api/fill/execute/scores';
import { useTableHeight } from '@/hooks/useMethod';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const loading = ref(true);
const showSearch = ref(true);
const { quarter } = toRefs<any>(proxy?.useDict('quarter'));
const queryFormRef = ref<ElFormInstance>();

//查询参数
const queryParams = ref<ScoreQueryDTO>({
  year: getYear(),
  quarter: '1'
});

/*用于存储表格数据*/
const tableList = ref<ExeAssessScoresVO[]>([]);

/*全部列表查询*/
const getListAll = () => {
  getInfo();
  getList(queryParams.value)
    .then((res) => {
      tableList.value = res.data;
      // console.log('数据：', res.data);
    })
    .finally(() => {
      loading.value = false;
    });
};

/** 搜索按钮操作 */
const handleQuery = () => {
  getListAll();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.value = {
    year: getYear(),
    quarter: '1',
    status: 0
  };
  handleQuery();
};
const edit = ref(false);

/*保存*/
const dto = ref<ExeAssessScoresDTO>({
  year: queryParams.value.year,
  quarter: queryParams.value.quarter,
  scoreList: []
});

/*编辑*/
const handleEdit = () => {
  if (tableList.value.length === 0) {
    proxy.$modal.msgError('列表为空不能编辑操作！');
  }
  edit.value = !edit.value;
  loading.value = true;
  if (!edit.value) {
    //保存
    dto.value.scoreList = tableList.value;
    saveOrUpdate(dto.value)
      .then(() => {
        proxy.$modal.msgSuccess('保存成功');
      })
      .then(() => {
        getListAll();
      })
      .finally(() => (loading.value = false));
  }
  loading.value = false;
};

/*下达*/
const handleIssue = () => {
  if (tableList.value.length === 0) {
    proxy.$modal.msgError('列表为空不能进行下达操作！');
  }
  loading.value = true;
  proxy.$modal.confirm('是否确认进行下达操作？').then(() => {
    queryParams.value.status = 1;
    updateStatus(queryParams.value)
      .then((res) => {
        if (res.data) {
          proxy.$modal.msgSuccess('下达成功');
          getInfo();
        }
      })
      .finally(() => (loading.value = false));
  });
};

/*归档*/
const handleArchive = () => {
  if (tableList.value.length === 0) {
    proxy.$modal.msgError('列表为空不能进行归档操作！');
  }
  loading.value = true;
  proxy.$modal.confirm('归档后将不能编辑考核得分，是否归档？').then(() => {
    queryParams.value.status = 2;
    updateStatus(queryParams.value)
      .then((res) => {
        if (res.data) {
          proxy.$modal.msgSuccess('归档成功');
          getInfo();
        }
      })
      .finally(() => (loading.value = false));
  });
};
const info = ref<ExeAssessScoresMainVO>();
const getInfo = () => {
  getDetail(queryParams.value).then((res) => {
    info.value = res.data;
    queryParams.value.status = res.data.status;
    console.log('info', info.value);
  });
};
/** 导出模板按钮操作 */
const importTemplate = () => {
  // proxy?.download(
  //   '/exe/BudgetMeasure/importTemplate',
  //   {
  //     ...queryParams.value
  //   },
  //   `预算执行测算模板.xlsx`
  // );
};

// 使用示例
const tableStyle = useTableHeight(showSearch);
/*挂载生命周期钩子*/
onMounted(() => {
  getListAll();
});
</script>

<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="never">
          <div>
            <el-form ref="queryFormRef" :inline="true">
              <el-form-item label="年度" prop="year">
                <el-date-picker type="year" format="YYYY" value-format="YYYY" v-model="queryParams.year" />
              </el-form-item>
              <el-form-item label="季度" prop="quarter">
                <el-select
                  v-model="queryParams.quarter"
                  placeholder="请选择季度"
                  @change="
                    () => {
                      edit = false;
                    }
                  "
                >
                  <el-option v-for="dict in quarter" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
    </transition>
    <el-card shadow="never">
      <template #header>
        <!-- Flex布局容器，添加必要样式 -->
        <div style="display: flex; justify-content: space-between">
          <!-- 左侧按钮组（无需额外样式，默认靠左） -->
          <div>
            <el-button
              :type="!edit ? 'success' : 'primary'"
              :icon="!edit ? 'Edit' : 'FolderChecked'"
              @click="handleEdit"
              :loading="loading"
              v-if="queryParams.status === 0"
            >
              {{ !edit ? '编辑' : '保存' }}
            </el-button>
            <el-button type="danger" icon="Promotion" @click="handleIssue" :loading="loading" v-if="queryParams.status === 0">下达</el-button>
            <el-button type="success" icon="DocumentChecked" @click="handleArchive" :loading="loading" v-if="queryParams.status === 1"
              >归档
            </el-button>
            <el-button type="warning" icon="Download" @click="importTemplate" :loading="loading">导出</el-button>
          </div>
          <!-- 右侧工具栏（默认靠右） -->
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getListAll" />
        </div>
      </template>
      <div>
        <el-table ref="tableRef" :data="tableList" append class="custom-table enhanced-table" :style="tableStyle" border>
          <el-table-column prop="deptName" label="预算部门" align="center" width="280" show-overflow-tooltip fixed />

          <el-table-column align="center" label="预算额">
            <el-table-column prop="businessBudget" label="业务职能" align="center" width="160">
              <template #default="scope">
                <el-input-number
                  v-model="scope.row.businessBudget"
                  v-if="edit"
                  :min="0.0"
                  :max="999999999.99"
                  :controls="false"
                  style="width: 100%"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" label="管理职能">
              <el-table-column prop="manageTotalBudget" label="管理合计" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageTotalBudget"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageExpenseBudget" label="费用类" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageExpenseBudget"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageCapitalBudget" label="资本类" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageCapitalBudget"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageDrugBudget" label="药品" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageDrugBudget"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageSuppliesBudget" label="耗材" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageSuppliesBudget"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" label="执行额">
            <el-table-column prop="businessExecute" label="业务职能" align="center" width="160">
              <template #default="scope">
                <el-input-number
                  v-model="scope.row.businessExecute"
                  v-if="edit"
                  :min="0.0"
                  :max="999999999.99"
                  :controls="false"
                  style="width: 100%"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" label="管理职能">
              <el-table-column prop="manageTotalExecute" label="管理合计" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageTotalExecute"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageExpenseExecute" label="费用类" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageExpenseExecute"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageCapitalExecute" label="资本类" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageCapitalExecute"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageDrugExecute" label="药品" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageDrugExecute"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageSuppliesExecute" label="耗材" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageSuppliesExecute"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" label="执行率">
            <el-table-column prop="businessRate" label="业务职能" align="center" width="160">
              <template #default="scope">
                <el-input-number v-model="scope.row.businessRate" v-if="edit" :min="0.0" :max="999999999.99" :controls="false" style="width: 100%" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="管理职能">
              <el-table-column prop="manageTotalRate" label="管理合计" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageTotalRate"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageExpenseRate" label="费用类" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageExpenseRate"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageCapitalRate" label="资本类" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageCapitalRate"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageDrugRate" label="药品" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageDrugRate"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageSuppliesRate" label="耗材" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageSuppliesRate"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="偏差率">
            <el-table-column prop="businessDeviation" label="业务职能" align="center" width="160">
              <template #default="scope">
                <el-input-number
                  v-model="scope.row.businessDeviation"
                  v-if="edit"
                  :min="0.0"
                  :max="999999999.99"
                  :controls="false"
                  style="width: 100%"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" label="管理职能">
              <el-table-column prop="manageTotalDeviation" label="管理合计" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageTotalDeviation"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageExpenseDeviation" label="费用类" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageExpenseDeviation"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageCapitalDeviation" label="资本类" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageCapitalDeviation"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageDrugDeviation" label="药品" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageDrugDeviation"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageSuppliesDeviation" label="耗材" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageSuppliesDeviation"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="得分">
            <el-table-column prop="businessScore" label="业务职能" align="center" width="160">
              <template #default="scope">
                <el-input-number v-model="scope.row.businessScore" v-if="edit" :min="0.0" :max="999999999.99" :controls="false" style="width: 100%" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="管理职能">
              <el-table-column prop="manageTotalScore" label="管理合计" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageTotalScore"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageExpenseScore" label="费用类" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageExpenseScore"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageCapitalScore" label="资本类" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageCapitalScore"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageDrugScore" label="药品" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageDrugScore"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="manageSuppliesScore" label="耗材" align="center" width="150">
                <template #default="scope">
                  <el-input-number
                    v-model="scope.row.manageSuppliesScore"
                    v-if="edit"
                    :min="0.0"
                    :max="999999999.99"
                    :controls="false"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column prop="totalScore" label="总得分" align="center" width="160">
              <template #default="scope">
                <el-input-number v-model="scope.row.totalScore" v-if="edit" :min="0.0" :max="999999999.99" :controls="false" style="width: 100%" />
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column prop="appealReason" align="center" label="申诉原因" width="350" show-overflow-tooltip>
            <template #default="scope">
              <el-input v-model="scope.row.appealReason" v-if="edit" show-word-limit></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
/* 核心布局样式 */
.header-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 左右贴边 */
  gap: 16px; /* 添加子元素间距 */
}

.budget-header {
  flex: 1; /* 占据剩余空间 */
  text-align: center; /* 文字水平居中 */
  white-space: nowrap; /* 防止标题换行 */
  font-size: 28px;
  font-weight: bold;
}

/* 可选：确保按钮组和工具栏不换行 */
.header-container > div:first-child,
.right-toolbar {
  flex-shrink: 0; /* 防止内容压缩 */
}
</style>
